<template>
  <div>
    <!--顶部过滤条件-->
    <div style="border-bottom: 1px solid #EEEEEE; ">
      <el-form :model="filterData" size="mini">
        <el-row :gutter="10">
          <el-col style="width: 280px;display: flex;line-height: 32px;">
            <div style="width: 80px; text-align: right; padding-right: 5px;">采购日期:</div>
            <el-date-picker type="daterange" v-model="filterData.daterange" size="mini" start-placeholder="起始日期"
              end-placeholder="结束日期" value-format="yyyy-MM-dd" range-separator="至"
              style="width: 100%;"></el-date-picker>
          </el-col>

          <el-col style="width: 280px;display: flex;line-height: 32px;">
            <div style="width: 80px;text-align: right; padding-right: 5px;">采购单号:</div>
            <el-input v-model="filterData.reqcode" placeholder="采购单号" size="mini" clearable></el-input>
          </el-col>

          <el-col style="width: 280px;display: flex;line-height: 32px;">
            <div style="width: 80px;text-align: right; padding-right: 5px;">商品信息:</div>
            <el-input v-model="filterData.good" placeholder="商品名称、规格型号等" size="mini" clearable></el-input>
          </el-col>

          <el-col style="width: 280px;display: flex;line-height: 32px;">
            <div style="width: 80px;text-align: right; padding-right: 5px;">客户:</div>
            <el-autocomplete v-model="filterData.client" placeholder="收货人" :fetch-suggestions="querySearchClientAsync"
              style="width: 100%;">
            </el-autocomplete>
          </el-col>

          <el-col style="width: 280px;display: flex;line-height: 32px;">
            <div style="width: 80px;text-align: right; padding-right: 5px;">客户单位:</div>
            <el-input v-model="filterData.clientname" placeholder="客户单位" style="width: 100%;" clearable>
            </el-input>
          </el-col>

          <el-col style="width: 280px;display: flex;line-height: 32px;">
            <div style="width: 80px;text-align: right; padding-right: 5px;">采购总额:</div>
            <el-input v-model="filterData.sum" placeholder="采购总额" size="mini" clearable></el-input>
          </el-col>

          <el-col style="width: 280px;display: flex;line-height: 32px;">
            <div style="width: 80px;text-align: right; padding-right: 5px;">供应商:</div>
            <el-input v-model="filterData.seller" placeholder="供应商" clearable style="width: 100%;"></el-input>
          </el-col>


          <el-col style="width: 280px;display: flex;line-height: 32px;">
            <div style="width: 80px;text-align: right; padding-right: 5px;">业务员:</div>
            <el-select v-model="filterData.requester" placeholder="业务员" clearable style="width: 100%;">
              <el-option v-for="(item,index) in saleman" :label="item.name" :value="item.name"
                :key="item.id"></el-option>
            </el-select>
          </el-col>


          <el-col style="width: 280px;display: flex;line-height: 32px;">
            <div style="width: 80px;text-align: right; padding-right: 5px;">店铺名称:</div>
            <el-input v-model="filterData.shopname" placeholder="店铺名称" size="mini" clearable></el-input>
          </el-col>

          <el-col style="width: 280px;display: flex;line-height: 32px;">
            <div style="width: 80px;text-align: right; padding-right: 5px;">进项票号:</div>
            <el-input v-model="filterData.buydetailnums" placeholder="关联进项发票号" style="width:100%" clearable></el-input>
          </el-col>

          <el-col style="width: 280px;display: flex;line-height: 32px;">
            <div style="width: 80px;">进项状态:</div>
            <el-select v-model="filterData.buydetailstatus" placeholder="进项状态" style="width: 100%;" clearable>
              <el-option label="不完整" value="0"></el-option>
              <el-option label="完整" value="1"></el-option>
            </el-select>
          </el-col>

          <el-col style="width: 280px;display: flex;line-height: 32px;">
            <div style="width: 80px;">销售状态:</div>
            <el-select v-model="filterData.soldstatus" placeholder="销售状态" style="width: 100%;" clearable>
              <el-option label="未售" value="0"></el-option>
              <el-option label="已售" value="1"></el-option>
              <el-option label="部分已售" value="2"></el-option>
            </el-select>
          </el-col>
          <el-col style="width: 280px;display: flex;line-height: 32px;">
            <div style="width: 80px;">付款状态:</div>
            <el-select v-model="filterData.paidstatus" placeholder="支付状态" style="width:100%" clearable>
              <el-option label="未支付" value="0"></el-option>
              <el-option label="部分支付" value="2"></el-option>
              <el-option label="已支付" value="1"></el-option>
            </el-select>
          </el-col>

          <el-col style="width: 280px;display: flex;line-height: 32px;">
            <div style="width: 80px;">采购途径:</div>
            <el-select allow-create v-model="filterData.buyroute" clearable placeholder="采购途径" style="width: 100%;">
              <el-option label="京东自营" value="京东自营"></el-option>
              <el-option label="京东慧采" value="京东慧采"></el-option>
              <el-option label="天猫" value="天猫"></el-option>
              <el-option label="淘宝" value="淘宝"></el-option>
              <el-option label="1688" value="1688"></el-option>
              <el-option label="工品优选" value="工品优选"></el-option>
              <el-option label="线下门店" value="线下门店"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-col>

          <el-col style="width: 280px;display: flex;line-height: 32px;">
            <div style="width: 80px;">付款方式:</div>
            <el-select v-model="filterData.paytype" placeholder="付款方式" style="width: 100%;" clearable>
              <el-option label="对公转账" value="对公转账"></el-option>
              <el-option label="微信支付" value="微信支付"></el-option>
              <el-option label="支付宝" value="支付宝"></el-option>
              <el-option label="现金" value="现金"></el-option>
              <el-option label="月结" value="月结"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-col>

          <el-col style="width: 280px;display: flex;line-height: 32px;">
            <div style="width: 80px;">发货状态:</div>
            <el-select v-model="filterData.deliverstatus" placeholder="发货状态" style="width: 100%;" clearable>
              <el-option label="待发货" value="0"></el-option>
              <el-option label="已发货" value="1"></el-option>
            </el-select>
          </el-col>

          <el-col style="width: 280px;display: flex;line-height: 32px;">
            <div style="width: 80px;">发票类型:</div>
            <el-select v-model="filterData.tickettype" placeholder="发票类型" style="width: 100%;" clearable>
              <el-option label="无票" value="无票"></el-option>
              <el-option label="普通发票" value="普通发票"></el-option>
              <el-option label="增值税专票" value="增值税专票"></el-option>
              <el-option label="累计普票" value="累计普票"></el-option>
              <el-option label="累计专票" value="累计专票"></el-option>
            </el-select>
          </el-col>

          <el-col style="width: 280px;display: flex;line-height: 32px;">
            <div style="width: 80px;">采购备注:</div>
            <el-input v-model="filterData.memo" placeholder="采购备注" clearable style="width: 100%;"></el-input>
          </el-col>


          <el-col style="width: 280px;display: flex;line-height: 32px;">
            <div style="width: 80px;">订单状态:</div>
            <el-select v-model="filterData.closed" filterable placeholder="订单状态" style="width: 100%;" clearable>
              <el-option label="正常" value="0"></el-option>
              <el-option label="已取消" value="1"></el-option>
            </el-select>
          </el-col>



          <el-col style="width: 280px;display: flex;line-height: 32px;">
            <div style="width: 80px;">所属账套:</div>
            <el-select v-model="filterData.account" filterable placeholder="账套" style="width: 100%;" clearable>
              <el-option :label="item.name" :value="item.name" v-for="(item,index) in accounts"
                :key="index"></el-option>
            </el-select>
          </el-col>

          <el-col style="width: 280px;display: flex;line-height: 32px;">
            <div style="width: 80px;">包含取消:</div>
            <el-checkbox v-model="filterData.containcancel">是</el-checkbox>
          </el-col>
          <el-col style="width: 120px;">
            <el-form-item label-width="0px">
              <el-button type="primary" icon="el-icon-search" style="width: 100%;" @click="handleQuery">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>

    </div>
    <div>
      <div style="padding: 2px 0px; display: flex;">
        <div style="flex: 1;">
          <el-button-group>
            <el-button type="primary" size="mini" @click="handleCreate" icon="el-icon-document">新增采购合同</el-button>
            <el-button type="primary" size="mini" @click="handleCreateDeliver" icon="el-icon-truck"
              :disabled="selection.length>=2">新增快递费</el-button>
            <el-button type="primary" size="mini" @click="handleCreateZcyFee" icon="el-icon-truck">新增政采云服务费</el-button>
          </el-button-group>
        </div>
        <div><el-button type="primary" size="mini" icon="el-icon-download" @click="handleExport">
            {{selection.length>0? '导出选中项':"导出全部"}}
          </el-button></div>
      </div>
      <div class="table-wraper">
        <el-table border :data="tableData" ref="mtable" height="100%" @row-click="handleRowSelect" :row-style="rowStyle"
          :header-cell-style="{'background-color': '#f5f7f9','color':'#666',border:'1px solid #f0f0f0'}"
          v-loading="loading" element-loading-text="数据加载中" empty-text="暂无采购记录" @select="handleSelection"
          @select-all="handleSelection">
          <el-table-column label="序号" type="index" width="50px" align="center" fixed="left"></el-table-column>
          <el-table-column type="selection" align="center" fixed="left"></el-table-column>
          <el-table-column label="明细" type="expand" fixed="left">
            <template v-slot="scope">
              <div style="margin-left: 150px; width: 1200px;">
                <el-table :data="scope.row.goods" border>
                  <el-table-column label="序号" type="index" align="center"></el-table-column>
                  <el-table-column label="商品名称" prop="title" show-overflow-tooltip></el-table-column>
                  <el-table-column label="规格型号" prop="model" show-overflow-tooltip></el-table-column>
                  <el-table-column label="计量单位" prop="unit" width="80px" align="center"
                    show-overflow-tooltip></el-table-column>
                  <el-table-column label="数量" prop="count" align="center"></el-table-column>
                  <el-table-column label="单价" prop="price" align="center"></el-table-column>
                  <el-table-column label="小计" prop="total" align="center"></el-table-column>
                  <el-table-column label="备注" prop="dmemo" show-overflow-tooltip></el-table-column>
                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" width="80px" >
            <template v-slot="scope">
              <div style="cursor: pointer;" @click="handleShowStatus(scope.$index,scope.row)">
                <span v-if="scope.row.closed==1" style="color: #E74C3C;">已取消</span>
                <span v-if="scope.row.closed==0" style="color: #55aa00;">正常</span>
                <i v-if="scope.row.closedmemo!=''" class="el-icon-info" :title="scope.row.closedmemo"></i>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="采购单号" prop="reqcode" width="120px" align="center">
            <template v-slot="scope">
              <span v-if="scope.row.closed==1" style="color: #888;"><del>{{scope.row.reqcode.split(" ")[0]}}</del></span>
              <span v-if="scope.row.closed!=1">{{scope.row.reqcode.split(" ")[0]}}</span>
            </template>
          </el-table-column>
          <el-table-column label="申请日期" prop="req_date" width="100px" align="center">
            <template v-slot="scope">
              <span v-if="scope.row.closed==1"><del>{{scope.row.reqdate.split(" ")[0]}}</del></span>
              <span v-if="scope.row.closed!=1">{{scope.row.reqdate.split(" ")[0]}}</span>
            </template>
          </el-table-column>

          <el-table-column label="付款状态" prop="paidstatus" align="center" width="80px">
            <template v-slot="scope">
              <div :title="'已付:'+scope.row.paidrmb">
                <span v-if="scope.row.paidstatus==0"
                  style="color: #ffffff; background-color: #E74C3C; padding:2px 5px;">未支付</span>
                <span v-if="scope.row.paidstatus==2"
                  style="color: #ffffff; background-color: #ca820f; padding:2px 5px;">部分支付</span>
                <span v-if="scope.row.paidstatus==1"
                  style="color: #ffffff; background-color: #55aa00; padding:2px 5px;">已支付</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="供应商名称" prop="seller" show-overflow-tooltip width="160">
            <template v-slot="scope">
               <span v-if="scope.row.closed==1" style="color: #888;"><del>{{scope.row.seller}}</del></span>
               <span v-if="scope.row.closed!=1">{{scope.row.seller}}</span>
            </template>
          </el-table-column>
          <el-table-column label="发票类型" prop="tickettype" align="center" width="100px">
            <template v-slot="scope">
              <span v-if="scope.row.closed==1" style="color: #888;"><del>{{scope.row.tickettype}}</del></span>
              <span v-if="scope.row.closed!=1">{{scope.row.tickettype}}</span>
            </template>
          </el-table-column>
          <el-table-column label="物流方式" prop="yunfei" width="80" align="center"></el-table-column>
          <el-table-column label="采购总额" prop="sum" width="98px" align="right">
            <template slot="header">
              <div style="text-align: center;">采购总额</div>
            </template>
            <template v-slot="scope">
              <span v-if="scope.row.closed==1" style="color: #888;"><del> {{parseFloat(scope.row.sum).toFixed(4)}}</del></span>
              <span v-if="scope.row.closed!=1"> {{parseFloat(scope.row.sum).toFixed(4)}}</span>

            </template>
          </el-table-column>
          <el-table-column label="采购备注" prop="memo" align="center" show-overflow-tooltip></el-table-column>

          <el-table-column label="店铺名称" prop="shopname" v-if="false" show-overflow-tooltip>
            <template v-slot="scope">
              <a v-if="scope.row.shopurl" :href="scope.row.shopurl" target="_blank">{{scope.row.shopname}}</a>
              <span v-if="scope.row.shopurl==''">{{scope.row.shopname}}</span>
            </template>
          </el-table-column>
          <el-table-column label="发货状态" width="85px" align="center">
            <template v-slot="scope">
              <div @click="handleDeliver(scope.$index,scope.row)" :title="'物流单号'+scope.row.deliver.num">
                <span v-if="scope.row.closed==1" style="color: #888;">
                  <del>
                  <span v-if="scope.row.deliver.status==1" style="font-weight: bold;color:#55aa00">已发货</span>
                  <span v-if="scope.row.deliver.status!=1 && scope.row.deliver.num==''" style="color:#FF0000">待发货</span>
                  <span v-if="scope.row.deliver.status!=1 && scope.row.deliver.num!='' && scope.row.deliver.status==0"
                    style="color: #55aa00;">已发货</span>
                  </del>
                </span>
                <span v-if="scope.row.closed!=1">
                <span v-if="scope.row.deliver.status==1" style="font-weight: bold;color:#55aa00">已发货</span>
                <span v-if="scope.row.deliver.status!=1 && scope.row.deliver.num==''" style="color:#FF0000">待发货</span>
                <span v-if="scope.row.deliver.status!=1 && scope.row.deliver.num!='' && scope.row.deliver.status==0"
                  style="color: #55aa00;">已发货</span></span>


              </div>
            </template>
          </el-table-column>
          <el-table-column label="退换货" width="60px" align="center" show-overflow-tooltip>
            <template v-slot="scope">
              <span v-if="scope.row.return_status=='1'" style="background-color: #FF0000;color:#FFFFFF;padding:2px 5px;"
                @click="showCancelDetail(scope.$index,scope.row)">有</span>
              <span v-if="scope.row.return_status=='0'">/</span>
            </template>
          </el-table-column>


          <el-table-column label="收货信息" prop="client" align="center" width="250px"  show-overflow-tooltip>
            <template v-slot="scope">
              <span v-if="scope.row.closed==1" style="color: #888;"><del> <i class="el-icon-copy-document" @click="copyText(scope.row.receiverinfo)"></i>   {{scope.row.receiverinfo}}</del></span>
              <span v-if="scope.row.closed!=1"> <i class="el-icon-copy-document" @click="copyText(scope.row.receiverinfo)"></i>   {{scope.row.receiverinfo}}</span>

            </template>
          </el-table-column>
          <el-table-column label="客户单位" prop="clientname" align="center" width="200"
            show-overflow-tooltip>
            <template v-slot="scope">
              <span v-if="scope.row.closed==1" style="color: #888;"><del>{{scope.row.clientname}}</del></span>
              <span v-if="scope.row.closed!=1">{{scope.row.clientname}}</span>
            </template>
            </el-table-column>
          <el-table-column label="申请人" prop="requester" align="center" width="80px"
            show-overflow-tooltip></el-table-column>
            <el-table-column label="进项票状态" align="center">
              <el-table-column label="完整度" prop="buyticket_status" width="80" align="center">
                <template v-slot="scope">
                  <span v-if="scope.row.buyticket_status==0" style="color: #E74C3C;">不完整</span>
                  <span v-if="scope.row.buyticket_status==1" style="color: #55aa00;">完整</span>
                </template>
              </el-table-column>
              <el-table-column label="发票号" prop="buyticket_nums" align="center" show-overflow-tooltip></el-table-column>
            </el-table-column>
          <el-table-column label="所属账套" prop="buyer" width="140px" show-overflow-tooltip></el-table-column>

          <el-table-column label="操作" align="center" fixed="right" width="160">
            <template v-slot="scope">
              <el-button-group>
                <el-button size="mini" icon="el-icon-truck" circle title="快递查询专属链接"
                  @click="handleGetDeliverLink(scope.$index,scope.row)"></el-button>
                <el-button v-if="parseInt(scope.row.paidstatus)>0" icon="el-icon-view" size="mini" circle
                  title="查看采购单详情" @click="handleEdit(scope.$index,scope.row)"></el-button>
                <el-button v-if="scope.row.paidstatus=='0'" icon="el-icon-edit" size="mini" circle title="修改付款记录"
                  @click="handleEdit(scope.$index,scope.row)"></el-button>
                <el-button v-if="scope.row.buy_attach.length>0" icon="el-icon-link" title="查看附件" size="mini" circle
                  @click="handleViewAttach"></el-button>
                <el-button icon="el-icon-download" title="导出采购合同" size="mini" circle
                  @click="exportOrder(scope.$index,scope.row)"></el-button>
                <el-button icon="el-icon-delete" size="mini" type="danger" circle title="删除采购记录"
                  @click="handleDelete(scope.$index,scope.row)"></el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="display: flex;">
        <div style="flex: 1; line-height: 45px;">
          <span style="margin-right: 20px;">选中金额:{{parseFloat(sum_selection).toFixed(2)}}</span>
          <span style="margin-right: 20px;">本页总额：{{parseFloat(sumpage).toFixed(2)}}</span>
          <span style="margin-right: 20px;">全部总额: {{parseFloat(sumtotal).toFixed(2)}}</span>
        </div>
        <div style="margin-top: 10px; text-align: right;">
          <el-pagination class="pagination" prev-text="上一页" next-text="下一页" layout=" prev, pager, next,sizes,total"
            :page-sizes="[20, 40, 60]" :total="numrows" :page-size="pagesize" :current-page="curpage"
            @size-change="handleSizeChange" @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </div>
      <div style="height:250px; overflow-y:auto;overflow-x: hidden; border: 1px solid #EEEEEE; padding: 5px;">
        <span v-if="!currentRow">
          <el-empty :image-size="120" description="点击付款记录查看详情"></el-empty>
        </span>
        <div v-if="currentRow">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="title">商品清单</div>
              <el-table :data="currentRow.goods" border>
                <el-table-column label="序号" type="index" align="center"></el-table-column>
                <el-table-column label="商品名称" prop="title" show-overflow-tooltip></el-table-column>
                <el-table-column label="规格型号" prop="model" show-overflow-tooltip></el-table-column>
                <el-table-column label="计量单位" prop="unit" width="80px" align="center"
                  show-overflow-tooltip></el-table-column>
                <el-table-column label="数量" prop="count" align="center"></el-table-column>
                <el-table-column label="单价" prop="price" align="center"></el-table-column>
                <el-table-column label="小计" prop="total" align="center"></el-table-column>
                <el-table-column label="备注" prop="dmemo" show-overflow-tooltip></el-table-column>
              </el-table>
              <div style="text-align: right; margin-right: 10px; line-height: 30px;">合计:{{currentRow.sum}}</div>
            </el-col>
            <el-col :span="6">
              <div class="title">付款记录</div>
            </el-col>
            <el-col :span="6">
              <div class="title">附件清单</div>
              <div style="display: flex;">
                <div v-if="currentRow.buy_attach.length==0">无</div>
                <div v-for="(item,index) in currentRow.buy_attach" :key="index" @click="handleViewAttach"
                  style="border: 1px solid #b6b6b6;">
                  <img v-if="item.type.indexOf('image')!=-1" :title="item.name" :src="item.url"
                    style="cursor:pointer;width: 30px; height:30px;padding: 2px;" />
                  <img v-if="item.type.indexOf('pdf')!=-1" :title="item.name" src="@/assets/images/icon_pdf.jpg"
                    style="cursor:pointer;width: 30px; height:30px;padding: 2px;" />
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <CreateUI ref="createUI" v-if="createVisible" @completeHandler="handleCreateCallback"></CreateUI>
    <CreateDeliverUI ref="createDeliverUI" v-if="createDeliverVisible"></CreateDeliverUI>
    <EditUI ref="editUI" v-if="editVisible" @completeHandler="handleEditCallback"></EditUI>
    <AttachUI ref="attachUI" v-if="attachVisible"></AttachUI>
    <ExportUI ref="exportUI" v-if="exportVsibile"></ExportUI>
    <ReutrnUI ref="returnUI" v-if="returnVisible"></ReutrnUI>
    <DeliverUI ref="deliverUI" v-if="deliverVisible" @updated="handleDeliverUpdated"></DeliverUI>
    <StatusUI ref="statusUI" v-if="statusVisible" @updated="handleStatusUpdated"></StatusUI>
    <CreateZcyFeeUI ref="createZcyFeeUI" v-if="zcyfeeVisible" @updated="loadDataList()"></CreateZcyFeeUI>
  </div>
</template>

<script>
  import CreateUI from './create.vue';
  import EditUI from './edit.vue';
  import ExportUI from './export.vue';
  import ReutrnUI from './canceldetail.vue';
  import AttachUI from '@/components/attachviewer.vue'
  import DeliverUI from './deliver.vue';
  import StatusUI from './StatusUI.vue'
  import CreateDeliverUI from './createdeliver.vue';
  import CreateZcyFeeUI from './createzcy.vue';
import { Empty } from 'element-ui';
  export default {
    components: {
      CreateUI,
      EditUI,
      AttachUI,
      ExportUI,
      ReutrnUI,
      DeliverUI,
      StatusUI,
      CreateDeliverUI,
      CreateZcyFeeUI
    },
    data() {
      return {
        saleman: [],
        filterData: {
          daterange: '',
          reqcode: '',
          good: '',
          requester: '',
          client: '',
          clientname: '',
          paidstatus: '',
          supuname: '',
          sum: '',
          buyroute: '',
          shopname: '',
          buytype: '',
          deliverstatus: '',
          paytype: '',
          buyerinfo: '',
          tickettype: '',
          buyticket_status: '',
          buyticket_bindnum: '',
          containcancel: true,
          memo: '',
          soldstatus: '',
          closed:''
        },
        loading: false,
        accounts: [],
        selection: [],
        sum_selection: 0,
        currentRow: null,
        sumtotal: 0,
        sumpage: 0,
        tableData: [],
        curpage: 1,
        pagesize: 20,
        numrows: 1,
        deliverVisible: false,
        createVisible: false,
        createDeliverVisible: false,
        editVisible: false,
        payVisible: false,
        attachVisible: false,
        exportVsibile: false,
        returnVisible: false,
        statusVisible: false,
        zcyfeeVisible: false,
      }
    },
    mounted() {
      var now= new Date();
      var firstDay=this.formatDate(new Date(now.getFullYear(),now.getMonth(),1));
      var lastDay=this.formatDate(new Date(now.getFullYear(),now.getMonth()+1,0));
      this.filterData.daterange = [firstDay,lastDay];


      if (this.$route.query && this.$route.buyticket_status != '') {
        this.filterData.buydetailstatus = this.$route.query.buyticket_status;
      }
      if (this.$route.query && this.$route.deliverstatus != '') {
        this.filterData.deliverstatus = this.$route.query.deliverstatus;
      }


      this.loadDataList();
      this.loadSaleman();
      this.loadAccount();
    },
    methods: {
      formatDate(date) {
        const yyyy = date.getFullYear();
        const mm = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的
        const dd = String(date.getDate()).padStart(2, '0');
        return `${yyyy}-${mm}-${dd}`;
      },
      copyText(txt){
          if(txt==""){

            return;
          }
            const el = document.createElement('textarea');
              // 将需要复制的文本内容赋值给 textarea 元素。
              el.value = txt;
              //将 textarea 元素添加到页面中。
              document.body.appendChild(el);
              //选中 textarea 元素中的文本。
              el.select();
              // 执行复制命令，将选中的文本复制到剪贴板
              document.execCommand('copy');
              //从页面中移除 textarea 元素。
              document.body.removeChild(el);
              //弹出提示框，告知用户文本已复制成功。
              this.$message.success("文本已复制");
      },
      getCurrentDate(n) {
        var dd = new Date();
        if (n) {
          dd.setDate(dd.getDate() - n);
        }
        var year = dd.getFullYear();
        var month =
          dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
        var day = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
        return year + "-" + month + "-" + day;
      },
      handleShowStatus(index, data) {
        this.statusVisible = true;
        this.$nextTick(() => {
          this.$refs.statusUI.dialogVisible = true;
          this.$refs.statusUI.init(index, JSON.parse(JSON.stringify(data)));
        })
      },
      handleStatusUpdated(index, data) {
        console.log(index, data);
        this.tableData[index].closed = data.status;
        this.tableData[index].closedmemo = data.memo;
      },
      handleExport() {
        if (this.selection.length > 0) {
          //导出选中
          var index = 1;
          let slist = this.selection.map((item) => {
            let obj = {
              "序号": index,
              "订单状态":item.closed=='0'? '正常':'已取消',
              "下单日期": item.reqdate,
              "采购单号": item.reqcode,
              "供应商名称": item.seller,
              "采购途径": item.buyroute,
              "付款方式": item.paytype,
              "发票类型": item.tickettype,
              "运费方式": item.yunfei,
              "采购总额": item.sum,
              "店铺名称": item.shopname,
              "店铺链接": item.shopurl,
              "收获信息": item.receiverinfo,
              "客户单位名称": item.clientname,
              "发货状态": item.deliver.status == 0 ? "待发货" : "已发货",
              "物流信息": item.deliver.name + "-" + item.deliver.num,
              "发货备注": item.deliver.memo,
              "订单渠道": item.platform,
              "订单总额": item.sum_order,
              "进项状态": item.buyticket_status == 0 ? '不完整' : '完整',
              "是有退换货": item.dreturn_status == 1 ? '有' : "/",
              "进项票号": item.buyticket_nums,
              "业务员": item.saleman,
              "所属账套": item.buyer,
            }
            index++;
            return obj;
          });
          let ws = XLSX.utils.json_to_sheet(slist, {
            skipHeader: false
          });
          ws["!cols"] = [{
            wpx: 80
          }];
          let wb = XLSX.utils.book_new();
          XLSX.utils.book_append_sheet(wb, ws, '采购订单');
          XLSX.writeFile(wb, "导出采购合同.xlsx");
        } else {
          //导出全部
          const params = {
            daterange: this.filterData.daterange,
            reqcode: this.filterData.reqcode,
            good: this.filterData.good,
            requester: this.filterData.requester,
            client: this.filterData.client,
            clientname: this.filterData.clientname,
            paidstatus: this.filterData.paidstatus,
            curpage: this.curpage,
            pagesize: this.pagesize,
            shopname: this.filterData.shopname,
            supname: this.filterData.supname,
            buyer: this.filterData.buyer,
            seller: this.filterData.seller,
            sum: this.filterData.sum,
            buyroute: this.filterData.buyroute,
            buytype: this.filterData.buytype,
            paytype: this.filterData.paytype,
            tickettype: this.filterData.tickettype,
            account: this.filterData.account,
            buyticket_status: this.filterData.buydetailstatus,
            buyticket_bindnum: this.filterData.buydetailnums,
            memo: this.filterData.memo,
            deliverstatus: this.filterData.deliverstatus
          };
          this.axios.post("api/admin/buylist/export", params).then(res => {
            if (res.status == 200 && res.data.code) {
              var index = 1;
              let slist = res.data.list.map((item) => {
                let obj = {
                  "序号": index,
                  "订单状态":item.closed=='0'? '正常':'已取消',
                  "下单日期": item.reqdate,
                  "采购单号": item.reqcode,
                  "供应商名称": item.seller,
                  "采购途径": item.buyroute,
                  "付款方式": item.paytype,
                  "发票类型": item.tickettype,
                  "运费方式": item.yunfei,
                  "采购总额": item.sum,
                  "店铺名称": item.shopname,
                  "店铺链接": item.shopurl,
                  "收货信息": item.receiverinfo,
                  "客户单位名称": item.clientname,
                  "发货状态": item.deliver.status == 0 ? "待发货" : "已发货",
                  "物流信息": item.deliver.name + "-" + item.deliver.num,
                  "发货备注": item.deliver.memo,
                  "订单渠道": item.platform,
                  "订单总额": item.sum_order,
                  "进项状态": item.buyticket_status == 0 ? '不完整' : '完整',
                  "是有退换货": item.dreturn_status == 1 ? '有' : "/",
                  "进项票号": item.buyticket_nums,
                  "业务员": item.saleman,
                  "所属账套": item.buyer,
                }
                index++;
                return obj;
              });
              let ws = XLSX.utils.json_to_sheet(slist, {
                skipHeader: false
              });
              ws["!cols"] = [{
                wpx: 80
              }];
              let wb = XLSX.utils.book_new();
              XLSX.utils.book_append_sheet(wb, ws, '采购订单');
              XLSX.writeFile(wb, "导出采购合同.xlsx");
            }
          })

        }
      },
      querySearchClientAsync(str, cb) {
        this.axios.post("api/admin/clientuser/filter", {
          username: str
        }).then(res => {
          if (res.data.code) {
            cb(res.data.data);
          }
        })
      },
      loadAccount() {
        this.axios.post("api/admin/account/list").then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.accounts = res.data.list;
          }
        })
      },
      handleCreateZcyFee() {
        this.zcyfeeVisible = true;
        this.$nextTick(() => {
          this.$refs.createZcyFeeUI.dialogVisible = true;
          this.$refs.createZcyFeeUI.initData();
        })
      },
      handleGetDeliverLink(index, data) {
        var params = {
          client: data.client
        }
        this.axios.post("api/common/deliver/link", params).then(res => {
          if (res.status == 200 && res.data.code == 1) {
            //构建link;
            this.CopyText(res.data.url);
            this.$message.success({
              message: res.data.msg,
              duration: 1500,
              showClose: true
            });
          } else {
            this.$message.error({
              message: res.data.msg,
              duration: 1500,
              showClose: true
            });
          }
        });
      },
      handleDeliver(index, row) {
        this.deliverVisible = true;
        this.$nextTick(() => {
          this.$refs.deliverUI.dialogVisible = true;
          this.$refs.deliverUI.init(index, JSON.parse(JSON.stringify(row)));
        })
      },
      handleDeliverUpdated(index, data) {
        this.tableData[index].deliver = data;
      },
      showCancelDetail(index, data) {
        this.returnVisible = true;
        this.$nextTick(() => {
          this.$refs.returnUI.dialogVisible = true;
          this.$refs.returnUI.initData(data.reqcode);
        })
      },
      exportOrder(index, data) {
        this.exportVsibile = true;
        this.$nextTick(() => {
          this.$refs.exportUI.dialogVisible = true;
          this.$refs.exportUI.init(JSON.parse(JSON.stringify(data)));
        })
      },
      handleSelection(list) {
        this.selection = list;
        this.sum_selection = 0;
        list.forEach(item => {
          this.sum_selection += parseFloat(item.sum);
        })
      },
      loadSaleman() {
        this.axios.post("api/admin/mate/list_op").then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.saleman = res.data.list;
          }
        })
      },
      handleViewAttach() {
        this.attachVisible = true;
        this.$nextTick(() => {
          this.$refs.attachUI.dialogVisible = true;
          this.$refs.attachUI.initData(JSON.parse(JSON.stringify(this.currentRow.buy_attach)));
        })
      },
      handleRowSelect(row, column, event) {
        if (this.currentRow) {
          if (this.currentRow.id === row.id) {
            //this.currentRow = null;
          } else {
            this.currentRow = row;
          }
        } else {
          this.currentRow = row;
        }
      },
      handleDelete(index, row) {
        this.$confirm('付款单号:' + row.reqcode, "确定要删除此下面记录吗？").then(() => {
          this.axios.post("api/admin/buylist/delete", {
            id: row.id
          }).then(res => {
            if (res.status == 200 && res.data.code) {
              this.$message.success({
                message: res.data.msg,
                duration: 1500,
                showClose: true
              });
              this.loadDataList();
            } else {
              this.$message.error({
                message: res.data.msg,
                duration: 1500,
                showClose: true
              });
            }
          })
        }).catch(() => {

        });
      },
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
      loadDataList() {
        this.loading = true;
        this.currentRow = null;
        const params = {
          daterange: this.filterData.daterange,
          reqcode: this.filterData.reqcode,
          good: this.filterData.good,
          requester: this.filterData.requester,
          client: this.filterData.client,
          clientname: this.filterData.clientname,
          paidstatus: this.filterData.paidstatus,
          curpage: this.curpage,
          pagesize: this.pagesize,
          soldstatus: this.filterData.soldstatus,
          shopname: this.filterData.shopname,
          supname: this.filterData.supname,
          buyer: this.filterData.buyer,
          seller: this.filterData.seller,
          sum: this.filterData.sum,
          buyroute: this.filterData.buyroute,
          buyerinfo: this.filterData.buyerinfo,
          buytype: this.filterData.buytype,
          paytype: this.filterData.paytype,
          tickettype: this.filterData.tickettype,
          account: this.filterData.account,
          buyticket_status: this.filterData.buydetailstatus,
          buyticket_bindnum: this.filterData.buydetailnums,
          memo: this.filterData.memo,
          containcancel: this.filterData.containcancel ? 1 : 0,
          deliverstatus: this.filterData.deliverstatus,
          closed:this.filterData.closed
        };
        this.axios.post("api/admin/buylist/list", params).then(res => {
          if (res.status == 200 && res.data.code) {
            this.tableData = res.data.list;
            this.numrows = res.data.numrows;
            this.sum = res.data.sum;
            this.sumtotal = res.data.sumtotal;
            this.sumpage = res.data.sumpage;
            if (this.tableData.length > 0) {
              this.currentRow = this.tableData[0];
            }
          }
          this.loading = false;
        })
      },
      handleCreate() {
        this.createVisible = true;
        this.$nextTick(() => {
          this.$refs.createUI.dialogVisible = true;
          this.$refs.createUI.initData();
        })
      },
      handleCreateDeliver() {
        this.createDeliverVisible = true;
        this.$nextTick(() => {
          this.$refs.createDeliverUI.dialogVisible = true;
          this.$refs.createDeliverUI.initData(this.selection);
        })
      },
      handleQuery() {
        this.curpage = 1;
        this.loadDataList();
      },
      handleCreateCallback() {
        this.curpage = 1;
        this.loadDataList();
      },
      handleEdit(index, row) {
        this.editVisible = true;
        this.$nextTick(() => {
          this.$refs.editUI.dialogVisible = true;
          this.$refs.editUI.initData(index, JSON.parse(JSON.stringify(row)));
        })
      },
      handleEditCallback(index, data) {
        console.log(index, data);
        this.tableData[index].buytype = data.buytype;
        this.tableData[index].buyroute = data.buyroute;
        this.tableData[index].buyer = data.buyer;
        this.tableData[index].buyerid = data.buyerid;
        this.tableData[index].shopname = data.shopname;
        this.tableData[index].shopurl = data.shopurl;
        this.tableData[index].tickettype = data.tickettype;
        this.tableData[index].ticketrate = data.ticketrate;
        this.tableData[index].yunfei = data.yunfei;
        this.tableData[index].paytype = data.paytype;
        this.tableData[index].sum = data.sum;
        this.tableData[index].client = data.client;
        this.tableData[index].requester = data.requester;
        this.tableData[index].paidstatus = data.paidstatus;
        this.tableData[index].pay_date = data.pay_date;
        this.tableData[index].buy_attach = data.buy_attach;
        this.tableData[index].goods = data.goods;
        this.tableData[index].cksupname = data.cksupname;
        this.tableData[index].receiverinfo = data.receiverinfo;
      },
      rowStyle({
        row
      }) {
        if (this.currentRow && this.currentRow.id == row.id) {
          return {
            'background-color': '#d1e2f7',
            'cursor': 'pointer'
          };
        }
        return {
          'cursor': 'pointer'
        };
      }
    }
  }
</script>

<style scoped>
  .table-wraper {
    height: calc(100vh - 520px);
  }

  ::v-deep .el-table .el-table__body tr td:hover {
    background-color: #00aaff !important;
  }

  .labelitem {
    text-align: right;
    padding-right: 5px;
  }
</style>
